<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>账号管理</title>
		<link rel="stylesheet" href="/pear/component/pear/css/pear.css" />

	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">欢迎您！</label>
							<label class="layui-form-label" style="color: red"> 云 沐 里</label>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="user-table" lay-filter="user-table"></table>
			</div>
		</div>


		<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        新增
		   </button>
		</script>

		<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

		<script type="text/html" id="user-enable">
			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
		</script>

		<script type="text/html" id="user-sex">
			{{#if (d.sex == 1) { }}
		    <span>男</span>
		    {{# }else if(d.sex == 2){ }}
		    <span>女</span>
		    {{# } }}
		</script>


		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

		<script src="/pear/component/layui/layui.js"></script>
		<script src="/pear/component/pear/pear.js"></script>
		<script>

			layui.use(['table', 'form', 'jquery','common','drawer','popup','notice'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
				let drawer = layui.drawer;
			    let popup = layui.popup;
			    let notice = layui.notice;

				$("#drawer-bottom").click(function() {
					drawer.open({
						direction: "bottom",
						dom: ".layer-bottom",
						distance: "40%"
					});
					console.log(1)
				})

				let MODULE_PATH = "operate/";

				let cols = [
					[
						{
							title: '邮箱',
							field: 'email',
							align: 'center',
							width: 150
						},
						{
							title: '用户名',
							field: 'userName',
							align: 'center'
						},
						{
							title: '性别',
							field: 'sex',
							align: 'center',
							width: 80,
							templet: '#user-sex'
						},
						{
							title: '电话',
							field: 'phone',
							align: 'center'
						},
						{
							title: '启用',
							field: 'enable',
							align: 'center',
							templet: '#user-enable'
						},
						{
							title: '注册',
							field: 'createTime',
							align: 'center',
							templet: '#user-createTime'
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'center',
							width: 130
						}
					]
				]

				table.render({
					elem: '#user-table',
					url: '/houtai/myList',
					where:{userName:'Alien'},
					page: true,
					limit:2,
					limits:[2,5,10],
					cols: cols,
					parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
					var result;
					if (this.page.curr) {
						result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
					}
					else {
						result = res.data.slice(0, this.limit);
					}
					return {
						"code": res.code, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.count, //解析数据长度
						"data": result //解析数据列表
					};
				},
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});


				//工具条事件 处理每一行数据 比如删除 修改
				table.on('tool(user-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

					if(layEvent === 'detail'){ //查看
						alert(1)
						//do somehing
					} else if(layEvent === 'remove'){ //删除
						var userName = obj.data.userName;
						layer.confirm('真的删除行么', function(index){
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							$.ajax({
								url:'/yanjie/remove',
								data:{"userName":userName},
								success:function (data) {
									if (data==1){
										popup.success("删除成功");
									}else {
										popup.failed("删除失败");
									}
								}
							})
						});


					} else if(layEvent === 'edit'){ //编辑
						var userName = obj.data.userName;
						var email = obj.data.email;
						var sex = obj.data.sex;
						var phone = obj.data.phone;
						var address = '';
						var  manager = '';
						$.ajax({
							url:'/yanjie/search',
							data:{"userName":userName},
							success:function (data) {
								 address = data.data[0].address;
								manager = data.data[0].manager;
							}
						})

						//打开一个框 可以修改：地址 手机号 性别 经理
						layer.open({
							type:2,
							title: '信息修改',
							area: ['600px', '500px'],
							content:['/yanjie/yanUpdate','no'],
							success:function(layero, index){
								// 拿到弹出层的body
								var body = layer.getChildFrame('body', index);
								// 将数据的用户名 和 邮箱放入
								body.contents().find("#userName").val(userName);
								body.contents().find("#email").val(email);
								body.contents().find("#sex").val(sex);
								body.contents().find("#address").val(address);
								body.contents().find("#phone").val(phone);
								body.contents().find("#manager").val(manager);
							},
							end:function () {
								popup.success("修改成功！");
							}
						})

						//同步更新缓存对应的值
						obj.update({
							username: '123'
							,title: 'xxx'
						});
					}
				});

				// 新增
				table.on('toolbar(user-table)', function(obj){
					var checkStatus = table.checkStatus(obj.config.id);
					switch(obj.event){
						case 'add':
							// 新增用户
							layer.open({
								type:2,
								anim:2,
								title: '新增住户',
								area: ['600px', '500px'],
								content:['/yanjie/yanAddcustomer','no'],
								end:function () {
									notice.success("新增成功");
								}
							})



							break;
					};
				});

			})
		</script>
	</body>
</html>
